<style type="text/css">
  h3{background:#eee; border-bottom:solid 1px #ccc; padding:8px;}
  #smallimg{background:#eee;padding:8px;}
  img{cursor:pointer;border:solid 1px #333; margin:5px;}
  .center{margin:0 auto;}
  div{text-align:center;}
  .dis_big_img{margin:10px;}
</style>

<h3 class="protitle"><%=@pro_images.first.product_name %></h3>
<div class="center"><a href="shopping_cart" class="long-btn">点击购买</a><a href="<%=product_path(params[:product_id])%>" class="long-btn">查看产品信息</a> </div>
<div id="smallimg" class="clearfix">
  <% for pro_image in @pro_images %>
    <%=image_tag("/images/proimages/#{pro_image.name.gsub(".","_s.")}",:size=>"130x100",:alt=>"/images/proimages/#{pro_image.name}",:id=>pro_image.id
    ) if pro_image.name%>
  <% end %>
</div>
<div class="dis_big_img">
  <img src="" id="bigimg" align="center" style="margin:10px auto;"/>
</div>

<script type="text/javascript">

  $(document).ready(function(){
    var key=""
    //big.attr("src", $("#smallimg img").attr("alt"));
    $("#smallimg img").css("opacity","0.3").click(function(){
      key=$(this).attr("id")
      $("#smallimg img").css("opacity","0.3"); $(this).css("opacity","1");
      $("#bigimg").fadeOut("fast",function(){
        $(this).attr("src", $("#"+key).attr("alt")).fadeIn("fast");
      })
    }).mouseover(function(){
      $(this).fadeTo("opacity","1");
    }).mouseout(function(){
      if($(this).attr("id")!=key)
      {
        $(this).css("opacity","0.3");
      }
    });

    $("#bigimg").click(function(){
      var current= $("#"+key);
      var src="";
      if(key==$("#smallimg img:last").attr("id"))
      {
        //console.log("true");
        src=$("#smallimg img:first").attr("alt");
        key=$("#smallimg img:first").attr("id");
        $("#smallimg img:first").trigger("mouseover");

      }
      else
      {
        key=current.next().attr("id");
        src=current.next().attr("alt");
        current.next().trigger("mouseover");
        //console.log(src);
      }
      current.trigger("mouseout");

      $(this).fadeOut("fast").attr("src", src).fadeIn("fast");
    });
    $("#smallimg img:first").trigger("click");
  });
</script>



